<template>
	<div class="layout-logo">
		<img
				v-if="webConfigStore.layout.layoutMode === 'Streamline' && !webConfigStore.layout.shrink || !webConfigStore.layout.menuCollapse"
				:src="IMAGE_URL.logoSmallUrl"
				alt="logo"
				class="logo-img"
				@click="routePush('/')"/>
		<div
				v-if="webConfigStore.layout.layoutMode === 'Streamline' && !webConfigStore.layout.shrink || !webConfigStore.layout.menuCollapse"
				:style="{ color: webConfigStore.getColorVal('menuActiveColor') }"
				class="website-name">
			<el-tooltip :content="$t('siteName')">
				<span style="cursor: pointer" @click="routePush('/')">{{ $t('siteNameShort') }}</span>
			</el-tooltip>
		</div>
		<icon v-if="webConfigStore.layout.layoutMode !== 'Streamline'"
		      :class="webConfigStore.layout.menuCollapse ? 'unfold' : 'fold'"
		      :color="webConfigStore.getColorVal('menuActiveColor')"
		      :name="webConfigStore.layout.menuCollapse ? 'fa fa-indent' : 'fa fa-dedent'"
		      size="18"
		      style="cursor: pointer"
		      @click="onMenuCollapse"/>
	</div>
</template>

<script lang="ts" setup>
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import {closeShade} from '@/utils/pageShadeUtil'
import {cacheKeys} from '@/stores/constant/cacheKey'
import {Session} from '@/utils/storageUtil'
import Icon from '@/components/icon.vue'
import {routePush} from '@/utils/routeUtil'
import {IMAGE_URL} from '@/utils/constantsUtil'

const webConfigStore = useWebConfigStore()

const onMenuCollapse = () => {
	if (webConfigStore.layout.shrink && !webConfigStore.layout.menuCollapse) {
		closeShade()
	}
	webConfigStore.setLayout('menuCollapse', !webConfigStore.layout.menuCollapse)
	Session.set(cacheKeys.BEFORE_RESIZE_LAYOUT, {
		layoutMode: webConfigStore.layout.layoutMode,
		menuCollapse: webConfigStore.layout.menuCollapse
	})
}
</script>

<style lang="scss" scoped>
.layout-logo {
	align-items: center;
	background: v-bind('webConfigStore.layout.layoutMode != "Streamline" ?  webConfigStore.getColorVal("menuTopBarBackground"):"transparent"');
	box-sizing: border-box;
	display: flex;
	height: 50px;
	justify-content: center;
	padding: 10px;
	width: 100%;
}

.logo-img {
	width: 28px;
	cursor: pointer;
}

.website-name {
	display: block;
	font-size: var(--el-font-size-extra-large);
	font-weight: 600;
	overflow: hidden;
	padding-left: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.fold {
	margin-left: auto;
}

.unfold {
	margin: 0 auto;
}
</style>
